<template>
  <div class="full~ relative center~ flex-col cursor-pointer text-xs box-border p-5px"
       @mouseover="hover = true"
       @mouseleave="hover = false">
    <div class="image~ h-60px w-60px"
         :style="{backgroundImage: `url(http://127.0.0.1:8081/static/user/${cover})`}"></div>
    <div class="center~ mt-10px">
      <div class="mr-10px">昵称:</div>
      <div>{{ nickname }}</div>
    </div>
    <div class="center~ mt-10px">
      <div class="mr-10px">手机号:</div>
      <div>{{ mobile }}</div>
    </div>
    <div v-show="maskShow" class="mask absolute full~ center~">
      <n-button type="error" size="tiny">删除</n-button>
    </div>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, ref, toRefs} from 'vue'
import {NButton} from "naive-ui";

export default defineComponent({
  name: "GroupMemberItem",
  components: {NButton},
  props: {
    id: {
      type: Number,
      required: true
    },
    nickname: {
      type: String,
      required: true,
    },
    mobile: {
      type: String,
      required: true
    },
    cover: {
      type: String,
      required: true
    },
    manageable: {
      type: Boolean,
      required: true
    }
  },
  setup(props) {
    const hover = ref(false)
    const maskShow = computed(() => {
      return props.manageable && hover.value
    })
    return {
      hover,
      maskShow,
      ...toRefs(props)
    }
  }
})
</script>

<style scoped>
.mask {
  background-color: rgba(0, 0, 0, 0.3);
}
</style>